/* eslint-disable no-shadow */
/* eslint-disable react-native/no-inline-styles */
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import configureStore from './src/store/configureStore';
import Router from './src/router';
import React, {useEffect, useState} from 'react';
import BootSplash from 'react-native-bootsplash';
import {
  ThemeManager,
  Colors,
  Typography,
  Spacings,
  Assets,
} from 'react-native-ui-lib';
import {StatusBar, KeyboardAvoidingView} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import RootToast from './src/components/Toast';
import RootDialog from './src/components/Dialog';
import './src/global';

const {store, persistor} = configureStore();

const App = () => {
  const {statusbars, appTheme} = store.getState();
  let [statusbar, setbar] = useState(statusbars);

  //切换主题 状态栏沉浸式体验
  store.subscribe(() => {
    const {appTheme, theme, appSize, statusbars} = store.getState();

    //头部颜色
    setbar(
      appTheme !== 'light'
        ? {
            ...statusbars,
            backgroundColor: '#333333',
            barStyle: 'light-content',
          }
        : {
            ...statusbars,
            backgroundColor: '#f0f0f0',
            barStyle: 'dark-content',
          },
    );
    let curtheme = theme.default;

    //设置组建theme
    Object.keys(curtheme).map(it => {
      ThemeManager.setComponentTheme(it, curtheme[it]);
    });

    //设置全局theme
    Colors.setScheme(appTheme);
    Colors.loadColors(theme.diy[appTheme]);

    let typography = {},
      size = theme.diy[appSize];
    for (let i in size) {
      typography[i] = size[i];
      typography[i].color = theme.diy[appTheme][i + 'Color'];
    }
    Typography.loadTypographies(typography);
    Spacings.loadSpacings(theme.diy[appSize + 's']);
  });

  useEffect(() => {
    Assets.loadAssetsGroup('icons', {
      user: require('./src/assets/user.png'),
    });
    BootSplash.hide({fade: true});
  }, []);

  return (
    <SafeAreaProvider style={{flex: 1}}>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <KeyboardAvoidingView
            style={{flex: 1}}
            enabled={false}
            behavior="height"
            contentContainerStyle={{backgroundColor: 'red'}}>
            <StatusBar {...statusbar} />
            <Router appTheme={appTheme} />
            <RootToast />
            <RootDialog />
          </KeyboardAvoidingView>
        </PersistGate>
      </Provider>
    </SafeAreaProvider>
  );
};

export default App;
